<!DOCTYPE html>
<html lang="en">

<head>
	<title>深度权重</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<link type="text/css" rel="stylesheet" href="main.css">
</head>

<body>

	<!-- Import maps polyfill -->
	<!-- Remove this when import maps will be widely supported -->
	<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>

	<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js"
				}
			}
		</script>
<!-- 现在的大问题就是，只有使用这种材质的颜色才会输出到关联的颜色缓冲区里，因为一个材质就是一个着色程序 -->
	<script type="module">
		

		import * as THREE from 'three';
		import { OrbitControls } from './jsm/controls/OrbitControls.js';
		// import { FullScreenQuad } from './jsm/postprocessing/Pass.js'; // 用于效果合成？
		// import { CopyShader } from './jsm/shaders/CopyShader.js'; //  一个简单的使用某种纹理的着色器
		import { GUI } from './jsm/libs/lil-gui.module.min.js';
		import { WeightedBlend } from './jsm/postprocessing/WeightedBlendpass.js';

		const renderer = new THREE.WebGLRenderer();
		const scene = new THREE.Scene();
		const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

		const pass = new WeightedBlend( { renderer, scene, camera } );
// debugger;
		const AppState = {
			Enabled: true,
			Depth: 3,
		};

		
		
		init().then( animate );

		async function init() {

			renderer.setPixelRatio( window.devicePixelRatio );
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( renderer.domElement );

			camera.position.z = 5;

			renderer.shadowMap.enabled = true;

			const dirLight = new THREE.DirectionalLight();
			dirLight.position.set( 0, 3, 0 );
			dirLight.castShadow = true;
			scene.add( dirLight );
			scene.add( new THREE.AmbientLight( undefined, 0.5 ) );

			const sphere = new THREE.Mesh(
				new THREE.SphereBufferGeometry(),
				new THREE.MeshStandardMaterial()
			);
			sphere.translateY( 3 ).translateX( 1.5 );
			sphere.castShadow = true;
			scene.add( sphere );

			const knot = new THREE.Mesh(
				new THREE.TorusKnotBufferGeometry( undefined, undefined, 128, 32 ),
				new THREE.MeshPhysicalMaterial( {
					transparent: true,
					opacity: 0.7,
					side: THREE.DoubleSide, // 用了双面
					WEIGHTED_AVERAGE: true,
				} )
			);
			knot.receiveShadow = true;
			// knot.enabelPeel = true;
			knot.material.depthPeeling = true; // 关联材质
			scene.add( knot );

			scene.add(
				new THREE.Mesh(
					new THREE.BoxBufferGeometry(),
					new THREE.MeshBasicMaterial( { color: 0xf0a000 } )
				)
			);

			const texture = await new THREE.TextureLoader().loadAsync(
				'textures/sprite0.png'
			);
			const plane = new THREE.Mesh(
				new THREE.PlaneBufferGeometry( 3, 3 ),
				new THREE.MeshStandardMaterial( { map: texture, side: THREE.DoubleSide } )
			);
			plane.translateX( - 1.6 );
			plane.translateY( 1.5 );
			scene.add( plane );

			const plane2 = new THREE.Mesh(
				new THREE.PlaneBufferGeometry( 3, 3 ),
				new THREE.MeshStandardMaterial( {
					map: texture,
					transparent: true,
					side: THREE.DoubleSide,
				} )
			);
			plane2
				.translateX( - 1.2 )
				.translateY( - 1.5 )
				.translateZ( 0 )
				.rotateY( - 2 * Math.PI * ( 1 / 10 ) );
			scene.add( plane2 );


			const orbit = new OrbitControls( camera, renderer.domElement );
			orbit.update();
			orbit.addEventListener( 'change', animate );

			const gui = new GUI();
			gui.add( AppState, 'Enabled' ).onChange( animate );
			gui.add( AppState, 'Depth' ).min( 1 ).max( 5 ).step( 1 ).onChange( v => {

				animate();

			} );

			window.addEventListener( 'resize', () => {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );
				animate();

			} );

		}

		function animate() {

			requestAnimationFrame( () =>
				AppState.Enabled ? pass.render() : renderer.render( scene, camera )
			);

		}
	</script>
</body>

</html>